<%= render "docs/_header.html", conn: @conn, page: @page %>

<%= doc_prose do %>
    <p class="lead">
        Azimutt can load any SQL file from the URL and display its entity-relationship diagram.
        Thanks to that, you can create a GitHub badge allowing your users to explore your database schema, IN ONE CLICK 🤯
    </p>
    <p>
        Just try it:
        <a href="https://azimutt.app/create?sql=https://raw.githubusercontent.com/azimuttapp/azimutt/refs/heads/main/backend/priv/repo/structure.sql&name=Azimutt" target="_blank" rel="noopener" class="not-prose no-underline">
            <img src="https://img.shields.io/badge/PostgreSQL-browse_online-gray?labelColor=4169E1&logo=postgresql&logoColor=fff&style=flat" alt="Explore database with Azimutt" class="inline" />
        </a>
    </p>
    <iframe width="768" height="432" src="https://www.youtube-nocookie.com/embed/3hFV3A9ZWs4?rel=0&modestbranding=1" title="Azimutt badge for GitHub" frameborder="0" allowfullscreen></iframe>
    <p>
        To use it on your own repository, there are a few simple steps:
    </p>
    <ol>
        <li>
            <p><b>Navigate to your SQL schema file and get it's *raw* url</b></p>
            <p>
                For Azimutt the file is <a href="https://github.com/azimuttapp/azimutt/blob/main/backend/priv/repo/structure.sql" target="_blank" rel="noopener">backend/priv/repo/structure.sql</a>, so the raw url is:<br>
                <i class="whitespace-nowrap">https://raw.githubusercontent.com/azimuttapp/azimutt/refs/heads/main/backend/priv/repo/structure.sql</i>
            </p>
        </li>
        <li>
            <p><b>Build the Azimutt create url</b></p>
            <p>
                The format is <code>https://azimutt.app/create?sql=$url&name=$project_name</code>, so for Azimutt it's:<br>
                <i class="whitespace-nowrap">https://azimutt.app/create?sql=https://raw.githubusercontent.com/azimuttapp/azimutt/refs/heads/main/backend/priv/repo/structure.sql&name=Azimutt</i>
            </p>
        </li>
        <li>
            <p><b>Create your badge with <a href="https://shields.io" target="_blank" rel="noopener">shields.io</a></b></p>
            <p>
                You can build the one you want. For PostgreSQL here what we suggest:<br>
                <i class="whitespace-nowrap">https://img.shields.io/badge/PostgreSQL-browse_online-gray?labelColor=4169E1&logo=postgresql&logoColor=fff&style=flat</i><br>
                See below for others.
            </p>
        </li>
        <li>
            <p><b>Put everything together, displaying a link with image in your README</b></p>
            <p>
                In Markdown it's: <code>[![Image alt](Image url)](Link url)</code>, so the final result for Azimutt is:<br>
                <i>[![Explore database with Azimutt](https://img.shields.io/badge/PostgreSQL-browse_online-gray?labelColor=4169E1&logo=postgresql&logoColor=fff&style=flat)](https://azimutt.app/create?sql=https://raw.githubusercontent.com/azimuttapp/azimutt/refs/heads/main/backend/priv/repo/structure.sql&name=Azimutt)</i>
            </p>
        </li>
    </ol>
    <p>Depending on your database, you can use these examples:</p>
    <p>
    <%= for {name, logo, color, logoColor} <- [
        {"PostgreSQL", "postgresql", "4169E1", "fff"},
        {"MySQL", "mysql", "4479A1", "fff"},
        {"MariaDB", "mariadb", "003545", "fff"},
        {"Oracle", "oracle", "F80000", "fff"},
        {"SQL_Server", "", "0078D4", "fff"},
        {"SQLite", "sqlite", "003B57", "fff"},
        {"MongoDB", "mongodb", "47A248", "fff"},
        {"Couchbase", "couchbase", "EA2328", "fff"},
        {"Snowflake", "snowflake", "29B5E8", "fff"},
        {"BigQuery", "googlebigquery", "669DF6", "fff"},
        {"Apache_Hive", "apachehive", "FDEE21", "000"},
    ] do %>
        <!--<pre><code class="hljs md">[![Explore database with Azimutt](https://img.shields.io/badge/<%= name %>-browse_online-gray?labelColor=<%= color %>&logo=<%= logo %>&logoColor=<%= logoColor %>&style=flat)](https://azimutt.app/create?sql=https://raw.githubusercontent.com/azimuttapp/azimutt/refs/heads/main/backend/priv/repo/structure.sql&name=Azimutt)</code></pre>-->
        <a href={"https://azimutt.app/create?sql=https://raw.githubusercontent.com/azimuttapp/azimutt/refs/heads/main/backend/priv/repo/structure.sql&name=Azimutt"} target="_blank" rel="noopener" class="not-prose no-underline">
            <img src={"https://img.shields.io/badge/#{name}-browse_online-gray?labelColor=#{color}&logo=#{logo}&logoColor=#{logoColor}&style=flat"} alt="Explore database with Azimutt" class="inline" />
        </a>
    <% end %>
    </p>
    <p>Some repos have adopted it, add yours if you want:</p>
    <ul>
        <li><a href="https://github.com/azimuttapp/azimutt" target="_blank" rel="noopener">azimuttapp/azimutt</a></li>
    </ul>
<% end %>

<%= render "docs/_footer.html", conn: @conn, page: @page, prev: @prev, next: @next %>
